<template>
	<view>
		<view class="musicWrap">
			<template v-if="currType == 'lrList'">
				<view class="musicList">
					<view class="musicImg posRel flexAll defBg">
						<!-- <image class="samePar posAbso ltzero" mode="aspectFill" :src="item.headImg"></image> -->
						<view class="layer flexAll samePar posAbso ltzero">
							<view class="iconfont icon-play"></view>
							<!-- <image class="playImg" :src="getStaticFilePath('play.png')"></image> -->
						</view>
					</view>
					<view class="musicTit ellip">花海犯得上发生</view>
				</view>
			</template>
			<template v-else-if="currType == 'list'">
				<view class="videoList">
					<view class="spCover posRel">
						<view class="iconfont icon-play posAbso"></view>
					</view>
					<view class="videoTit ellip">学习工作犯得上发生压力过大</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			currType:{//list lrList(音乐时候用)
				type:String,
				default:'list'
			}
		},
	}
</script>

<style lang="scss" scoped>
	.musicWrap{
		display: flex;
		overflow: hidden;
		overflow-x: auto;
		margin-bottom: 20rpx;
		.musicList{
			width: 150rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
			text-align: center;
			.musicImg{
				width: 150rpx;
				height: 150rpx;
				position: relative;
				margin-bottom: 10rpx;
				background: pink;
				border-radius: 16rpx;
				.layer{
					background: rgba(0,0,0,.2);
					border-radius: 8rpx;
					z-index: 2;
					.icon-play{
						width: 80rpx;
						height: 46rpx;
						line-height: 46rpx;
						border-radius: 8rpx;
						background: rgba(255,255,255,.3);
						font-size: 26rpx;
						color: #fff;
						text-align: center;
					}
				}
			}
			.musicTit{
				color: $sq-main0;
				font-size: 26rpx;
			}
			&:first-child{
				margin-left: 30rpx;
			}
		}
		.videoList{
			width: 260rpx;
			height: 230rpx;
			background: $sq-main0;
			padding: 20rpx 17rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			.spCover{
				width: 260rpx;
				height: 180rpx;
				background: pink;
				border-radius: 16rpx;
				margin-bottom: 15rpx;
				.icon-play{
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 50%;
					background: rgba(0,0,0,.3);
					font-size: 26rpx;
					color: #fff;
					text-align: center;
					left: 20rpx;
					bottom: 20rpx;
				}
			}
			.videoTit{
				font-size: 28rpx;
				color: #fff;
				margin: 0 15rpx;
			}
			&:first-child{
				margin-left: 30rpx;
			}
		}
	}
	.samePar{
		border-radius: 16rpx;
	}
</style>